.header {
  position: sticky;
  left: 0;
  top: 0;
  height: 110PX;
  margin-bottom: 10PX;
  box-sizing: border-box;
  z-index: 999;
  padding: 24PX 40PX 0;
  display: flex;
  justify-content: space-between;

  .header-bg {
    position: absolute;
    width: 140%;
    height: 110PX;
    background: url(../../static/images/index-head-bg.png) no-repeat center / 100%;
    left: -20%;
    top: 0;
    border-radius: 0 0 40% 40%;
    z-index: -1;
  }

  .avatar {
    flex: 0 0 62PX;
    height: 62PX;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2PX solid #fff;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1PX 5PX black;

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }

  .mid-box {
    flex: 1;
    margin: 0 10PX;
    color: #fff;
    height: 62PX;

    .info-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 62PX;

      .info-top {
        display: flex;

        .nickname {
          width: 60%;
          font-size: 18PX;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .group {
          width: 40%;
          text-align: right;
          font-size: 10PX;
          line-height: 24PX;
        }
      }



      .user-num {
        font-size: 10PX;
      }

      .exp-bar {
        position: relative;
        width: 152PX;
        height: 20PX;
        background-color: #bababa;
        border-radius: 10PX;
        overflow: hidden;
        font-size: 10PX;

        .process {
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 10PX;
          height: 100%;
          background: linear-gradient(90deg, rgba(230, 173, 5, 1) 0%, rgba(255, 204, 0, 1) 100%);
          box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.25);
        }

        .num {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-shadow: 0 0 3PX #333;
        }
      }
    }

    .login {
      height: 100%;
      font-size: 18PX;
      font-weight: bold;
      display: flex;
      // align-items: center;
    }
  }

  .sign-in {
    position: relative;
    flex: 0 0 70PX;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34PX;
    font-size: 12PX;
    color: #fff;
    border-radius: 16PX;
    background: linear-gradient(135deg, rgba(246, 208, 41, 1) 0%, rgba(240, 172, 10, 1) 100%);

    &::before {
      content: ' ';
      position: absolute;
      top: 5PX;
      left: 10PX;
      width: 2PX;
      height: 2PX;
      background-color: #fff;
    }

    &::after {
      content: ' ';
      position: absolute;
      top: 5PX;
      left: 15PX;
      width: 6PX;
      height: 2PX;
      background-color: #fff;
    }
  }
}

.panel-list {
  padding: 0 20PX;
  margin-bottom: 10PX;

  .panel-item {
    .panel-item-title {
      font-size: 20PX;
      font-weight: bold;
      margin: 10PX 0;
    }

    .panel-item-content {
      height: 108PX;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 8PX;
      box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25);
      display: flex;

      .left,
      .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .num {
          width: 80%;
          font-size: 20PX;
          border-bottom: 2PX solid rgba(255, 195, 0, 1);
          text-align: center;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .panel-item-role {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 25%;

        .role-img {
          width: 48PX;
          height: 48PX;
        }

        .role-text {
          width: 80%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }
      }
    }
  }
}

.jump-list {
  padding: 0 20PX;
}